<template>
  <div class="ruzhujigou">
      <div class="pt">
          <div class="pt">
            <div class="title2">
                    <div>【我的年审详情】</div>
                    <div v-if="isrenzhen=='0'" style="color: blue;font-size: 15px;">您的企业认证待审核，请耐心等候</div>
                    <div v-if="isrenzhen=='1'" style="color: green; font-size: 15px;">您的企业认证已通过,无需修改</div>
                    <div v-if="isrenzhen=='2'" style="color: red;font-size: 15px;">您的企业认证已被驳回，请重新提交</div>
                    <div v-if="isrenzhen=='3'" style="color: red;font-size: 15px;">您的企业认证审核中，请耐心等候</div>
                </div>
              <div class="table">
                  <el-table :data="ptList" stripe style="width: 100%">
                      <el-table-column prop="date" type="index" align="center"> </el-table-column>
                      <el-table-column  label="当前状态" align="center" sortable>
                          <template slot-scope="scope">
                              <span class="text" style="color:  #2675c0;"
                                  v-if="scope.row.pprovalStatus == 0">待审核</span>
                              <span class="text" style="color:  green;"
                                  v-if="scope.row.pprovalStatus == 1">已通过</span>
                              <span class="text" style="color:  red;"
                                  v-if="scope.row.pprovalStatus == 2">已驳回</span>
                              <span class="text" style="color:  #ef9f0b;"
                                  v-if="scope.row.pprovalStatus == 3">审核中</span>
                              <span class="text" style="color:  #9f9d9d;"
                                  v-if="scope.row.pprovalStatus == 4">草稿</span>
                          </template>
                      </el-table-column>
                      <el-table-column prop="qyName" label="年审企业" align="center"> </el-table-column>
                      <el-table-column prop="applicationLevel" label="申报类型" align="center"
                      :filters="filterOptions" :filter-method="filterMethod"  >
                        <template slot="header" slot-scope="scope">
                            <span>申报类型</span>
                            <i class="el-icon-caret-bottom" style="cursor: pointer;"></i>
                        </template>
                      <template slot-scope="scope">
                          <span class="text">{{ getApplicationTypeText(scope.row.applicationType) }}</span>
                      </template>
                      </el-table-column>
                      <el-table-column prop="applicationLevel" label="年审级别" align="center" sortable>
                          <template slot-scope="scope">
                              <span class="text"  v-if="scope.row.applicationLevel == 0">国家级</span>
                              <span class="text"  v-if="scope.row.applicationLevel == 1">省级</span>
                              <span class="text"  v-if="scope.row.applicationLevel == 2">市级</span>
                          </template>
                      </el-table-column>
                      <el-table-column label="年审时间" align="center">
                          <template slot-scope="scope">
                              <span style="color: black;">{{ scope.row.gmtCreate | flitt }}</span>
                          </template>
                      </el-table-column>
                      <el-table-column label="年审详情" align="center">
                          <template slot-scope="scope">
                              <span class="text" style="cursor: pointer;"
                                  @click="openDetail(scope.row)">查看详情</span>
                          </template>
                      </el-table-column>
                  </el-table>
                  <el-dialog title="年审详情" :visible.sync="DialogVisible" width="1000px" center>
                       <!-- <router-view></router-view> -->
                       <NianShen :prop-a="state"></NianShen>
                   
                  </el-dialog>
              </div>
              <div>

              </div>
          </div>
      </div>
  </div>
</template>

<script>
import NianShen from './NianShen.vue'
import { pingtai_Count, shenbao_list,  nianshen_detail ,nianshen_detailList,getFileName} from '../../api/api'
export default {
  data() {
      return {
          tableData: [],
          ptList: [],
          DialogVisible: false,
          state:{
              type:'',
              level:'',
              status:'',
              reviewId:'',
          },
          type:null,
          level:null,
          date:null,
          filterOptions: [
        { text: '示范平台', value: 0 },
        { text: '示范基地', value: 1 },
        { text: '入驻机构', value: 2 },
      ],
      isrenzhen:null
      };
  },

  methods: {
    getApplicationTypeText(applicationType) {
      if (applicationType === 0) {
        return '示范平台';
      } else if (applicationType === 1) {
        return '示范基地';
      } else if (applicationType === 2) {
        return '入驻机构';
      }
    },
    filterMethod(value, row) {
      return row.applicationType === value;
    },
    search(){
nianshen_detail({ userId: this.$store.state.userId,type:'0,1,2',level:'0,1,2,3',page:1,size:10,year:'' }).then((res) => {
          console.log(res.data.data);
          this.ptList = res.data.data.records
      })
    },
    //选择年审类型
    choseType(type){
       this.type=type
    },
    choseLevel(level){
        this.level=level
    },
      openDetail(row) {
          console.log(row);
          
          this.state.reviewId=row.id
          this.state.type=row.applicationType
          this.state.level=row.applicationLevel
          this.state.status= row.pprovalStatus
          this.DialogVisible= true
      
      },
     
  },
  created() {
   
    this.search()

      pingtai_Count({ userId: this.$store.state.userId, type: '0' }).then((res) => {
          if (res.data.state == '20000') {
              this.$store.commit('setptState', res.data.data.pprovalStatus)
              localStorage.setItem('pingtaitype', res.data.data.applicationType)
              localStorage.setItem('pingtaistate', res.data.data.pprovalStatus)
          }
      })
      pingtai_Count({ userId: this.$store.state.userId, type: '1' }).then((res) => {
          if (res.data.state == '20000') {
              this.$store.commit('setjdtState', res.data.data.pprovalStatus)
              localStorage.setItem('jiditype', res.data.data.applicationType)
              localStorage.setItem('jidistate', res.data.data.pprovalStatus)
          }
      })
      pingtai_Count({ userId: this.$store.state.userId, type: '2' }).then((res) => {
          if (res.data.state == '20000') {
              console.log(res.data.state, '111');
              this.$store.commit('setrzState', res.data.data.pprovalStatus)
              localStorage.setItem('jigoutype', res.data.data.applicationType)
              localStorage.setItem('jigoustate', res.data.data.pprovalStatus)
          }
      })
  },
  filters: {
      flitt(name) {
          return name.slice(0, 10)
      }
  },
  components: {
    NianShen,
  }
}
</script>

<style  lang="scss" scoped>
.form-item2{
    display: flex;

}
.tab{
 margin-bottom: 20px;
}
.selectBox {
  margin: 20px 0px;
}

.el-select .el-input__inner {
  width: 200px;
}

.el-input {
  width: 400px;
}

.el-select {
  width: 200px !important;

}

.zhizhao {
  width: 800px;
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #D50000;
  margin: 10px;
}

.ruzhu {
  width: 100%;
  display: flex;
  justify-content: center;

  .ruzhuBox {
      width: 1220px;
      min-height: 1220px;
      height: 100%;
      background: #FFFFFF;
      margin: 30px;
  }
}

.ruzhuBox {
  width: 1220px;
  height: 100%;
  background: #FFFFFF;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 50px;

  .title {
      display: flex;

      div:nth-of-type(1) {
          width: 120px;
          height: 50px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #262626;
          line-height: 50px;
          margin-bottom: 20px;
          border-bottom: 4px #1285D7 solid;

      }

      div:nth-of-type(2) {
          height: 50px;
          font-size: 15px;
          font-family: Arial;
          font-weight: 400;
          color: #DCDCDC;
          line-height: 50px;
          margin-right: 5px;

          border-bottom: 4px #1285D7 solid;

      }

      div:nth-of-type(3) {
          width: 189px;
          height: 50px;
          font-size: 15px;
          font-family: Arial;
          font-weight: 400;
          color: #DCDCDC;
          line-height: 50px;

          border-bottom: 4px #1285D7 solid;

      }

  }

  .title2 {
      width: 150px;
      height: 40px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1285D7;
  }
}

.name {
  width: 208px;
  height: 45px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FD8544;
}

.text,
.iconDownload {
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1285D7;
}

.el-table__header {
  background-color: #1285D7 !important;
  color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
  background-color: #1285D7 !important;
  color: white;
  font-size: 16px;
}

.status {
  width: 48px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #D62502;
}

.el-button--primary {
  background-color: #fd8544;
  border-color: #fd8544;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.tableFoot {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;

  button {
      margin: 0px 10px;

      &:hover {
          cursor: pointer;
      }
  }

  button:nth-of-type(1) {
      width: 98px;
      height: 40px;
      background: #2797E8;
      border: 0;
      border-radius: 3px 3px 3px 3px;
      color: white;
  }

  button:nth-of-type(2) {
      width: 98px;
      height: 40px;
      background: #F39200;
      border-radius: 3px 3px 3px 3px;
      border: 0;

      color: white;
  }

  button:nth-of-type(3) {
      width: 98px;
      height: 40px;
      background: #FFFFFF;
      border-radius: 3px 3px 3px 3px;
      color: white;
      border: 0;
  }
}</style>